<template>
  <span>
    <ConfigProvider
      :theme="{
        token: {
          colorPrimary: appStore.themeColor
        }
      }"
    >
      <RangePicker
        v-bind="attrs"
        :locale="locale"
        :show-time="showTime"
        :model-value="rangeValue"
        @change="onTimeChange"
      />
    </ConfigProvider>
  </span>
</template>

<script setup>
/**
 * showTime: 是否显示时分秒
 * start：开始时间
 * end：结束时间
 * showQuick是否展示快捷选项
 * shortcuts快捷选项
 * shortcutsPosition快捷选项位置
 */
import { rangeShortcuts } from './data.js'
// 引入antdv的日期组件
import { ConfigProvider, RangePicker } from 'ant-design-vue'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import { useAppStore } from '@/store'
import dayjs from 'dayjs'
const appStore = useAppStore()
defineOptions({ name: 'AntData', inheritAttrs: false })

const emit = defineEmits(['update:start', 'update:end', 'dateChange'])
const attrs = useAttrs()

const props = defineProps({
  showTime: {
    default: {
      defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')]
    },

    require: false
  },
  start: {
    type: String,
    default: undefined,
    require: true
  },
  end: {
    type: String,
    default: undefined,
    require: true
  },
  shortcutsPosition: {
    type: String,
    default: 'left',
    require: false
  },
  shortcuts: {
    type: Array,
    default: () => [],
    require: false
  },
  showQuick: {
    type: Boolean,
    default: () => false,
    require: false
  }
})

const rangeValue = ref(['', ''])
const shortcutsR = ref([])

watch(
  () => props.start,
  () => {
    rangeValue.value = [props.start, props.end]
  },
  { deep: true, immediate: true }
)

watch(
  () => [props.showQuick, props.shortcuts],
  (value) => {
    if (value[0]) {
      if (props.shortcuts.length > 0) {
        shortcutsR.value = props.shortcuts
      } else {
        shortcutsR.value = rangeShortcuts
      }
    } else {
      shortcutsR.value = []
    }
  },
  { deep: true, immediate: true }
)

const onTimeChange = (e) => {
  // e = e || [undefined, undefined]
  // rangeValue.value = e
  // emit('update:start', e[0])
  // emit('update:end', e[1])
  // emit('dateChange')
}
</script>
<style scoped lang="scss">
:deep(.ant-picker) {
  padding: 2px 11px 2px;
  border-radius: 4px;
  margin-top: -1px;
}
</style>
